<template>

	<div style="display: flex;flex-wrap: wrap;">
		<div class="fileList" v-for="(item, index) in files" :key="index">
			<div style="height: 60px;">
				<img v-if="item.suffix == 'png' || item.suffix == 'jpg' || item.suffix == 'jpeg'" class="file-icon"
					src="../assets/images/img.png" alt="" srcset="" />
				<img v-else-if="item.suffix == 'docx'" class="file-icon" src="../assets/images/docx.png" alt=""
					srcset="" />
				<img v-else-if="item.suffix == 'pdf'" class="file-icon" src="../assets/images/pdf.png" alt=""
					srcset="" />
				<img v-else-if="item.suffix == 'pptx' || item.suffix == 'ppt'" class="file-icon"
					src="../assets/images/pptx.png" alt="" srcset="" />
				<img v-else-if="item.suffix == 'xlsx'" class="file-icon" src="../assets/images/xlsx.png" alt=""
					srcset="" />
				<img v-else-if="item.suffix == 'txt'" class="file-icon" src="../assets/images/txt.png" alt=""
					srcset="" />
				<img v-else-if="item.suffix == 'mp4'" class="file-icon" src="../assets/images/mp4.png" alt=""
					srcset="" />
				<img v-else class="file-icon" src="../assets/images/wj.png" alt="" srcset="" />
				<div>
					<div class="file-path">{{item.name}}</div>
					<div class="file-path">{{(Number(item.size) / 1024).toFixed(1)}}kb</div>
				</div>
			</div>
			<div style="height: 40px;border-top: 1px solid #e1eee1;">
				<div v-if="!props.readonly" class="file-del" @click="filedel(index)">删除</div>
				<div style="display: flex;justify-content: flex-start;">
					<div class="file-look" @click="filelook(item.suffix, item.path)">查看</div>
				</div>
			</div>
		</div>
		<el-upload v-if="!props.readonly" class="avatar-uploader" :multiple="true" :action="upAction" :on-success="handleSuccess"
			list-type="picture-card" :file-list="files">
			<div style="display: flex;justify-content: center;align-items: center;">
				<el-icon :size="30">
					<CirclePlusFilled />
				</el-icon>
				<div style="margin-left: 10px;">添加文件</div>
			</div>
		</el-upload>
	</div>

</template>

<script lang="ts" setup>
	import { ref, reactive, defineProps, defineEmits, watch } from 'vue'
	import { ElMessage } from 'element-plus'
	import { Plus } from '@element-plus/icons-vue'

	import type { UploadProps } from 'element-plus'
	import store from "@/store";

	// let files = ref([])

	let files = ref([])
	const props = defineProps({
		files: {
			type: Array,
			default: []
		},
    readonly:  {
      type: Boolean,
      default: false
    }
	});
	watch(() => props.files, (newValue, oldValue) => {
    files.value = newValue
		console.log('123', newValue)
	}, { immediate: true, deep: true });

	const dialogImageUrl = ref('')
	const dialogVisible = ref(false)

	const baseApi = import.meta.env.VITE_BASE_IMG_URL
	const upAction = ref(import.meta.env.VITE_BASE_API + '/fileUpload/uploadAll')

	const emit = defineEmits(['clk'])

	const handleSuccess : UploadProps['onSuccess'] = (
		response,
		uploadFile
	) => {
		if (response) {
			let imgVal = reactive({ name: '', path: '', suffix: '', size: 0 })
			imgVal.name = uploadFile.name
			imgVal.path = response
			imgVal.size = uploadFile.size
			imgVal.suffix = response.substr(response.lastIndexOf(".") + 1)
			files.value.push(imgVal)
			emit('clk', files.value)
      console.log('----传值给父组件-----',files.value)
    } else {
			ElMessage.error('上传失败，请重试')
		}
	}

	const filelook = (suffix, url) => {
		window.open(baseApi + url)
	}

	const filedel = (index) => {
		files.value.splice(index, 1)
		emit('clk', files.value)
	}

	defineExpose({ files })
</script>

<style scoped>
	/deep/ .el-upload {
		border: 1px solid #e9e9e9;
		background: transparent;
		width: auto !important;
		height: 100px !important;
		box-sizing: border-box;
		padding: 0 60px;
		margin: 5px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.remark {
		margin-top: 100px;
		font-size: 13px;
	}

	/deep/ .is-success {
		display: none;
	}

	.fileList {
		width: 218px;
		height: 100px;
		border: 1px solid #e9e9e9;
		background: transparent;
		box-sizing: border-box;
		padding: 0 10px;
		font-size: 14px;
		margin: 5px;
		border-radius: 6px;
	}

	.fileList>div {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.file-icon {
		width: 40px;
		height: 40px;
	}

	.file-down {
		margin-left: 5px;
	}

	.file-down,
	.file-del,
	.file-look {
		cursor: pointer;
	}

	.file-path {
		width: 130px;
		line-height: 20px;
		text-align: end;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		word-wrap: break-word;
	}

	/deep/ .el-dialog {
		background: transparent;
		box-shadow: none;
	}

	/deep/ .el-dialog__body {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/deep/ .el-dialog svg {
		color: #fff;
	}
</style>
